<template>
  <div class="card-container">
    <el-card v-for="(item, index) in cardData" :key="index"
             :header="item.header" :style="{flex: '0 0 23%', marginRight: index < cardData.length - 1 ? '2%' : '0', marginBottom: '20px'}"
             shadow="always">
      <div class="card-content"> <!-- 添加一个包裹内容的div -->
        {{ item.value }}
      </div>
    </el-card>
  </div>
</template>


<script setup lang="ts">
import { ref, reactive } from 'vue';
import { getData } from "@/api/home.ts";

const cardData = ref([]);

getData().then(res => {
  cardData.value = [
    { header: "分类数量", value: res.data.data.category },
    { header: "商品数量", value: res.data.data.product },
    { header: "用户数量", value: res.data.data.user },
    { header: "待收货", value: res.data.data.order.unRefund },
    { header: "待发货", value: res.data.data.order.unRecv },
    { header: "待付款", value: res.data.data.order.unDeli },
    { header: "已完成", value: res.data.data.order.end },
    { header: "已退款", value: res.data.data.order.exit },
  ];
});
</script>
<style lang="scss" scoped>
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 -10px; /* 给容器添加负margin，以便卡片之间的间隔均匀分布 */

  .el-card {
    flex: 0 0 23%; /* 每张卡片占据23%的宽度，留下1%的空间作为间隔 */
    margin: 10px 10px 20px;
    box-sizing: border-box;
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 子元素纵向排列 */
    align-items: center; /* 子元素在交叉轴上居中 */
  }

  .card-content {
    text-align: center; /* 文本内容居中 */
    font-size: 1rem; /* 默认文字大小 */
  }
}
</style>